<template>
  <tm-app>
    <tm-sheet class="flex flex-center">
      <tm-image
        :src="LogoImg"
        width="200"
        height="200"
      ></tm-image>
    </tm-sheet>
    <tm-text color="#959eb0" fontSize="34" class="px-n10 my-n10">{{
      $trans("pages.login.welcome")
    }}</tm-text>

    <tm-sheet color="#f5f6fa" :padding="[24, 24, 24, 0]">
      <tm-text color="primary" fontSize="24">{{
        $trans("pages.login.loginForm.emailPlaceholder")
      }}</tm-text>
      <tm-input
        v-model="loginForm.email"
        :focusHighlight="false"
        placeholder=""
        color="transparent"
        inputPadding="0"
        focusFontColor="#000001"
        cursorColor="#000001"
        class="text-weight-bold"
      ></tm-input>
    </tm-sheet>

    <tm-text color="error" class="px-24 mb-24">{{
      $trans("pages.login.loginForm.emailInvalidText")
    }}</tm-text>

    <tm-sheet color="#f5f6fa" :padding="[24, 24, 24, 0]">
      <tm-text color="primary" fontSize="24">{{
        $trans("pages.login.loginForm.passwordPlaceholder")
      }}</tm-text>
      <tm-input
        v-model="loginForm.password"
        :focusHighlight="false"
        :password="true"
        :showEye="true"
        placeholder=""
        color="transparent"
        inputPadding="0"
        focusFontColor="#000001"
        cursorColor="#000001"
        class="text-weight-bold"
      ></tm-input>
    </tm-sheet>

    <tm-row justify="space-between" class="px-24">
      <tm-row>
        <tm-text color="error">{{
          $trans("pages.login.loginForm.passwordInvalidText")
        }}</tm-text>
      </tm-row>
      <view class="flex flex-center" @click="onToForget">
        <tm-text>{{ $trans("pages.login.loginForm.forgetPassword") }}</tm-text>
        <tm-text color="danger" class="ml-n5">{{
          $trans("pages.login.loginForm.resetPassword")
        }}</tm-text>
      </view>
    </tm-row>

    <tm-row class="mx-20 mt-n15" @click="onLogin">
      <tm-button block round="50">{{
        $trans("pages.login.loginForm.signIn")
      }}</tm-button>
    </tm-row>

    <tm-row justify="center" class="mt-n10">
      <tm-text color="#282c37">{{
        $trans("pages.login.loginForm.newUser")
      }}</tm-text>
      <tm-text color="danger" class="ml-n5" @click="onToRegister">{{
        $trans("pages.login.loginForm.register")
      }}</tm-text>
    </tm-row>
  </tm-app>
</template>

<script lang="ts" setup>
import LogoImg from '@/assets/images/logoLogo.png'
const loginForm = reactive({
  email: "",
  password: "",
})

const onLogin = () => {
  uni.navigateTo({
    url: "/pages/index/index",
  })
}

const onToForget = () => {
  uni.navigateTo({
    url: "/pages/resetPsd/index",
  })
}

const onToRegister = () => {
  uni.navigateTo({
    url: "/pages/register/index",
  })
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}
</style>
